<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个Vue案例</title>
    <!-- 开发环境版本 -->
    <script src="./js/vue-2.5.16.js"></script>
    <style>
        #app {
            font-size: 24px;
            color: red
        }
        .name span {
            display: inline-block;
            padding: 10px;
            margin: 10px;
            border: 1px solid#ccc
            color： rgb(22, 22, 22)
            border-radius： 10px;
            background-color：rgb(235, 231, 231);
        }
    </style>

</head>
<body>
    <h1>Vue案例</h1>
    <div id="app">
        {{ message }}
        <br> <br>
        <a v-bind:href="baidu_url"target="_blank">百度</a>
        <br><br>
        <a :href="tengxun_url" target="_blank">腾讯</a>
        <hr>
    <!-- if条件渲染 -->
    <!-- v-if 的使用 -->
    <p v-if="seen">你能看见我吗？v-if</p>

    <!-- v-if 和 v-else 的使用 -->
    <p v-if="isLogin">个人中心</p>
    <p v-else>登录</p>

    <!-- v-if, v-else-if 和 v-else -->
    <p>
        成绩：
        <span v-if="level === 1">优秀</span>
        <span v-else-if="level === 2">良</span>
        <span v-else-if="level === 3">中</span>
        <span v-else>差</span>
    </p>
    <hr>
    <!-- v-show -->
    <p v-show="isShow">你能看见我吗？v-show</p>
    <p class="name">
        <span v-for="(name, index) in names">
            {{ index + 1 }} - {{ name }}
        </span>
    </p>
    <p v-for="student in students">
        姓名: {{ student.name }},
        性别: {{ student.sex }},
        年龄: {{ student.age }},
    </p>


    <hr>
    <h2>事件 methods</h2>
    <button v-on:click="login()">登录</button>
    <button v-on:click="login2('张三')">登录2</button>
    <button @click="add(18, 36)">求任意两个数的和</button>
    <button @click="sub(18, 36)">求任意两个数的减法</button>
    <button @click="mul(18, 36)">求任意两个数的积</button>
    <button @click="division(18, 36)">求任意两个数的除法</button>

    <hr>
    <h2>model表单输入绑定(双向绑定数据)</h2>
    <input class="input01" type="number" v-model="num1">{{ fuhao }}
    <select v-model="fuhao">
            <option value="+">+</option> 
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input class="input01" type="number" v-model="num2"> =
        {{ result }}
        <button @click="add_form">结果</button>
        <p>{{ num1 }} + {{ num2 }} = {{ result  }} </p>
        <hr>
        <h2>Todolist案例</h2>
        <input type="text" v-model="newBook">
        <button @click="addNewBook">添加</button>
        <ul>
            <li v-for="book in books">{{ book }}</li>
        </ul>

</div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',  // 获取页面标记对象 <div id='app'></div>
            // 页面需要的数据
            data: {
                message: '您好 Vue!!!',
                baidu_url: 'https://www.baidu.com',
                tengxun_url: 'https://www.qq.com',
                seen: true,
                isLogin: false,
                level: 5,
                isShow: true,
                names: ['朱鱼好','孙二名','之鲨鱼','顾贝贝'],
                students: [
                    {
                        'name': '朱鱼好',
                        'sex':'男',
                        'age':'19',
                    },
                    {
                        'name': '孙二名',
                        'sex':'男',
                        'age':'19',
                    },
                    {
                        'name': '之鲨鱼',
                        'sex':'男',
                        'age':'19'
                    },
                    {
                    'name': '顾贝贝',
                    'sex':'女',
                    'age':'19'
                    }
                ],
                num1: 0,
                num2: 0,
                result:0,
                fuhao:'+',
                books: ['学习Vue', '学习django基础','学习django前台'],
                newBook: ''
            },
            methods: {
                login: function() {
                    alert('你点击登录按钮了!');
                },
                login2: function(name){
                    alert(name + '点击登录2按钮了!');
                },
                add: function(a,b) {
                    result = a + b
                    alert(a + '+' + b + '=' + result)
                },
                reduction: function(a,b) {
                    result = a - b
                    alert(a + '-' + b + '=' + result)
                },
                add_form: function(){
                    //this.result = parseInt(this.num1) + (this.fuhao) + (this.num2)
                    switch (this.fuhao){
                        case '+': this.result = parseInt(this.num1) + parseInt(this.num2);break;
                        case '-': this.result = this.num1 - this.num2;break;
                        case '*': this.result = this.num1 * this.num2;break;
                        case '/': this.result = this.num1 / this.num2;break;
                    }
                },
                addNewBook: function(){
                    //吧 newBook 添加 books
                    this.books.push(this.newBook)
                    this.newBook = ''
                }
            }
        })
    </script>
</body>
</html>